<template>
    <div class="content">
        <el-form :model="ruleForm" status-icon ref="ruleForm" label-width="100px" class="demo-ruleForm">
            <el-form-item label="账号id" prop="accountId" style="width:90%">
                <el-input type="input" v-model="ruleForm.accountId" autocomplete="off" prefix-icon="el-icon-user"
                    placeholder="请输入用户名"></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="password" style="width:90%">
                <el-input type="password" v-model="ruleForm.password" autocomplete="off" prefix-icon="el-icon-lock"
                    placeholder="请输入密码"></el-input>
            </el-form-item>
            <el-form-item label="验证码" prop="code" style="width:90%">
                <el-input v-model="ruleForm.code" style="width: 168px;float: left" maxlength="5" placeholder="请输入验证码">
                </el-input>
                <el-image :src="captchaImg" style="width: 133px;height: 39px;margin-left: 4px;" @click="getCaptcha()">
                </el-image>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="login()" class="login">登录</el-button>
                <!-- <input name="remember-me" type="checkbox" value="true" />记住我 -->
            </el-form-item>
            <el-form-item>
                <div class="register-wrapper">
                    <span class="register" @click="toRegister">注册账户</span>
                    <span>忘记密码</span>
                </div>
            </el-form-item>
        </el-form>
    </div>
</template>
<script>
import axios from "/src/utils/api";
import qs from 'qs';

export default {
    name: "Login",
    data() {
        return {
            captchaImg: '',
            ruleForm: {
                accountId: '',
                password: '',
                code: '',
                key: '',
                timer: null
            },
        };
    },
    created() {
        this.getCaptcha();
    },
    methods: {
        login() {
            const self = this;
            // 添加header和qs.stringify以转化为form-data格式
            axios.post("/login", qs.stringify(this.ruleForm), { headers: { "Content-Type": "application/x-www-form-urlencoded" } }).then(function (response) {
                if (!response.data.data) {
                    alert(response.data.msg)
                } else {
                    // 登陆成功则将token存入localStorage
                    localStorage.setItem("token", response.data.data)
                    self.$router.push('/main')
                }
            }).catch(function (error) {

                alert(error);
                console.log(error);
            })
            this.$router.push("/main")
        },
        toRegister() {
            const self = this;
            self.$router.push('/register')
        },
        getCaptcha() {
            //节流，避免用户短时间内多次点击
            if (!this.timer) {
                axios.get("/captcha").then(res => {
                    this.captchaImg = res.data.data.captchaImg;
                    this.ruleForm.key = res.data.data.key;
                }).catch(error => {
                    alert(error)
                })
                this.timer = setTimeout(() => {
                    this.timer = null;
                }, 1000);
            }

        }
    }
}
</script>

<style scoped>
.content {
    width: 100%;
    height: 100%;
    background-image: url("../assets/img/background.webp");
    background-size: 100% 100%;
    /*关键*/
}

.el-form {
    padding-top: 20px;
    background-color: white;
    width: 450px;
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 10px;
    box-shadow: 5px 5px 5px #888888;
}

.el-form-item {
    margin-top: 20px;
}

.login,
.register,
.register-wrapper {
    width: 300px;
}

.register-wrapper {
    display: flex;
    justify-content: space-between;
}

.register-wrapper span {
    width: 60px;
    cursor: pointer;
}

.register {
    color: rgb(5, 186, 247);
}
</style>
